<!doctype html>
<html lang="en">
  <head>
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
      rel="stylesheet"
    />
    <script type="module" crossorigin src="/frontend-mini-challenges/javascript/assets/index-BeghnCCl.js"></script>
    <link rel="modulepreload" crossorigin href="/frontend-mini-challenges/javascript/assets/navbar-PAFhV-cJ.js">
    <link rel="modulepreload" crossorigin href="/frontend-mini-challenges/javascript/assets/header-DIqzw3PH.js">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/javascript/assets/navbar-Dkne97UN.css">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/javascript/assets/header-DAZPOirm.css">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/javascript/assets/index-DjuKfpGW.css">
  </head>

  <body>
    <main>
      <div class="controller-wrapper">
        <div>
          <h4>Break length</h4>
          <div class="controller">
            <p class="time-control" id="breaklen"></p>
            <div class="button-wrapper">
              <button class="duration-button" data-target="break" data-direction="up">
                <i class="fas fa-chevron-up"></i>
              </button>
              <button class="duration-button" data-target="break" data-direction="down">
                <i class="fas fa-chevron-down"></i>
              </button>
            </div>
          </div>
        </div>
        <div>
          <h4>Session Length</h4>
          <div class="controller">
            <p class="time-control" id="sesslen"></p>
            <div class="button-wrapper">
              <button class="duration-button" data-target="session" data-direction="up">
                <i class="fas fa-chevron-up"></i>
              </button>
              <button class="duration-button" data-target="session" data-direction="down">
                <i class="fas fa-chevron-down"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="timer-wrapper">
        <h3 class="timer-header"></h3>
        <p class="time"><span id="minute"></span><span>:</span><span id="second"></span></p>
        <div class="timer-display">
          <button id="play">
            <i id="playicon" class="fas fa-play"></i>
          </button>
          <button id="reset">
            <i class="fa fa-refresh"></i>
          </button>
        </div>
      </div>
    </main>
    <audio id="beep">
      <source
        src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav"
        type="audio/wav"
      />
    </audio>
  </body>
</html>
